<template>
  <div id="homePageSys">
    <el-row>
      <el-col :span="20" :offset="2">
        <el-col :span="5">
          <div class="card-box">
            <div class="personalcard" v-for="(item,index) in resumeList" :key="index" @click="viewDetails(item.id)">
              <el-row>
                <el-col :span="10">
                  <div class="personalphoto">
                    <img src="../../assets/img/login/icon_interviewer.png" width="80%">
                  </div>
                </el-col>
                <el-col :span="14">
                  <div class="personalinfor">
                    <p>{{item.name}}</p>
                    <p>{{item.work_years}}年</p>
                    <span>{{item.sex}}</span>/<span>{{item.end_education}}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" style="float:right;margin:0.8em" @click="toOther('/recruitment')">查看更多</el-button>
          </div>
        </el-col>
        <el-col :span="19">
          <div class="homeinfor">
            <!-- 搜索栏 -->
            <el-input placeholder="请输入简历名称" v-model="input">
              <el-button slot="append" icon="search" @click="searchResume()">搜索</el-button>
            </el-input>
            <div style="margin-top:0.7em;width:100%;">
              <span class="title">热门搜索:</span>
              <span class="checkinfor" v-for="(item,index) in datalist" :k="index">{{item.title}}</span>
            </div>
            <!-- 图片轮播 -->
            <el-row>
              <el-col style="margin-top:1.5em">
                <div class="turnphotos">
                  <el-carousel :interval="4000" arrow="always" height="250px">
                    <el-carousel-item v-for="(item,index) in photolist" :key="index">
                      <img :src="item.url" width="100%">
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </el-col>
            </el-row>
            <!-- 公司图片展示 -->
            <el-row>
              <el-col class="showcompany">
                <div class="photos" v-for="(item,index) in photolists">
                  <div class="photo-item">
                    <img :src="item.url">
                  </div>
                  <div class="mask"></div>
                  <div class="context">{{item.title}}</div>
                </div>
              </el-col>
            </el-row>
            <!-- 远程视频链接 -->
            <el-row>
              <el-col style="margin-top: 2em;">
                <div class="interview-item">
                  <div class="interview-infor" @click="toInterview()">
                    <i class="fa fa-television fa-5x"></i>
                    <p class="view-title">远程视频</p>
                  </div>
                </div>
                <div class="interview-item" v-for="(item,index) in linklist" :key="index">
                  <a :href="item.url" target="_blank">
                    <div class="interview-infor">
                      <i :class="item.icon"></i>
                      <p class="view-title">{{item.title}}</p>
                    </div>
                  </a>
                </div>
              </el-col>
            </el-row>
            <!-- 职位招聘 -->
            <el-row>
              <el-col :span="24">
                <el-tabs type="border-card" style="margin-top:2em">
                  <el-tab-pane label="热门职位">
                    <div class="position-card" v-for="(item,index) in topPositionList" :key="index"
                         @click="toinfoDetails(item.id)">
                      <div class="card-content">
                        <div class="content-left">
                          <h4 @click="toPositionDetail(item.id)">
                            {{item.job_title}}<span>{{formatterDate(item)}}发布</span></h4>
                          <p>
                            <span>{{item.salary}}</span>{{forworkExperience(item)}} / {{formatterendEdu(item)}}
                          </p>
                        </div>
                        <div class="content-right">
                          <h4>{{item.company_name}}</h4>
                          <p>企业服务,数据服务</p>
                        </div>
                      </div>
                      <div class="card-footer">
                        <span style="float:left;">{{item.work_space}}</span>
                        <div style="width:40%;float:right;">{{item.welfare}}</div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="最新职位">
                    <div class="position-card" v-for="(item,index) in newPositionList" :key="index"
                         @click="toinfoDetails(item.id)">
                      <div class="card-content">
                        <div class="content-left">
                          <h4 @click="toPositionDetail(item.id)">
                            {{item.job_title}}<span>{{formatterDate(item)}}发布</span></h4>
                          <p>
                            <span>{{item.salary}}</span>{{forworkExperience(item)}} / {{formatterendEdu(item)}}
                          </p>
                        </div>
                        <div class="content-right">
                          <h4>{{item.company_name}}</h4>
                          <p>企业服务,数据服务</p>
                        </div>
                      </div>
                      <div class="card-footer">
                        <span style="float:left;">{{item.work_space}}</span>
                        <div style="width:40%;float:right;">{{item.welfare}}</div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-button type="primary" style="float:right;margin:1em;" @click="toOther('/position')">查看更多
                  </el-button>
                </el-tabs>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <el-Dialog :visible.sync="dialogTableVisible" size="tiny">
      <UserEntryDialog @entryReturn="beLogin" :url="'/interviewlist'"></UserEntryDialog>
    </el-Dialog>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import UserEntryDialog from '@/components/userLogin/UserEntryDialog'
  import { formatterTime, changeSalaryStyle } from '../../assets/js/common.js'

  export default {
    name: 'homePageSys',
    data () {
      return {
        input: '',
        newPositionList: [],  //最新职位
        topPositionList: [],   //热门职位
        resumeList: [],
        photolist: [
          {
            url: '../../../static/img/pic1.jpg',
            title: '',
          }, {
            url: '../../../static/img/pic2.jpg',
            title: '',
          }, {
            url: '../../../static/img/pic3.jpg',
            title: '',
          }],
        photolists: [
          {
            url: '../../../static/img/pica1.jpg',
            title: '西安玩具厂',
          }, {
            url: '../../../static/img/pica2.jpg',
            title: '',
          }, {
            url: '../../../static/img/pica1.jpg',
            title: '',
          }, {
            url: '../../../static/img/pica2.jpg',
            title: '',
          }, {
            url: '../../../static/img/pica1.jpg',
            title: '',
          }],
        linklist: [
          {
            url: 'http://www.myhm.org/mybys/P_Web/index.aspx',
            title: '人事代理',
            icon: 'fa fa-user-plus fa-5x'
          }, {
            url: 'http://www.myhm.org/dacx/index.asp',
            title: '档案查询',
            icon: 'fa fa-phone-square fa-5x'
          }, {
            url: 'http://www.myhm.org/rsagency/?id=56&bt=1',
            title: '毕业生报道',
            icon: 'fa fa-graduation-cap fa-5x'
          }],
        datalist: [{
          title: 'PHP',
          url: ''
        }, {
          title: 'WEB前端',
          url: ''
        }, {
          title: '产品经理',
          url: ''
        }, {
          title: '内容运营',
          url: ''
        }, {
          title: 'JAVA',
          url: ''
        }, {
          title: '测试',
          url: ''
        }, {
          title: '开发',
          url: ''
        }, {
          title: 'C++',
          url: ''
        }, {
          title: '维护',
          url: ''
        }],
        dialogTableVisible: false
      }
    },
    created () {
      this.getHotJobList()
      this.getNewJobList()
      this.getTalentList()
    },
    methods: {
      toOther (item) {
        this.$router.push({'path': item})
      },
      toinfoDetails (ID) {
        this.$router.push({'path': '/positioninfo/' + ID})
      },
      searchResume () {
        if (this.input !== '') {

        }
        this.$router.push({path: '/recruitment'})
      },
      //个人信息展示卡片
      getTalentList () {
        let _this = this
        let pragram = new Object()
        pragram.page_size = 7
        pragram.page_no = 1
        postDataToServer('HM_RESUME_TALENTS_LIST', pragram).then((data) => {
          if (data.status === 0) {
            _this.resumeList = data.data_list
            for (let i = 0; i < data.data_list.length; i++) {
              if (_this.resumeList[i].work_years === undefined) {
                _this.resumeList[i].work_years = 0
              }
              _this.resumeList[i].end_education = getStaticMapList('education', _this.resumeList[i].end_education)
              _this.resumeList[i].sex = getStaticMapList('sex', _this.resumeList[i].sex)
            }
          }
        })
      },
      //查看列表简历详情
      viewDetails (id) {
        this.$router.push({path: '/talentdetail/' + id})
      },
      //远程面试登录判断
      toInterview () {
        this.userEntry = this.$store.state.userEntry
        if (this.userEntry === false) {
          this.dialogTableVisible = true
        } else {
          this.talentExchangeId = this.$store.state.talentExchange
          switch (this.talentExchangeId) {
            case '管理员':
              this.$message({
                type: 'warning',
                message: '您没有面试权限！'
              })
              break
            case '个人用户':
              this.$router.push({'path': '/interviewlist'})
              break
            case '企业用户':
              this.$router.push({'path': '/interviewlist'})
              break
            case undefined:
              this.toFillInfo()
              break
          }
        }
      },
      beLogin (state) {
        if (state === true) {
          this.dialogTableVisible = false
          this.$router.go(0)
        }
      },
      //获取工作展示卡片数据
      getHotJobList () {
        let _this = this
        let pragram = new Object()
        pragram.page_size = 5
        pragram.page_no = 1
        postDataToServer('HM_RESUME_JOBS_LIST', pragram).then((data) => {
          if (data.status === 0) {
            data.data_list.forEach((item) => {
              item = changeSalaryStyle(item)
            })
            _this.topPositionList = data.data_list
          }
        })
      },
      getNewJobList () {
        let _this = this
        let pragram = new Object()
        pragram.page_size = 5
        pragram.page_no = 1
        postDataToServer('HM_RESUME_JOBS_LIST', pragram).then((data) => {
          if (data.status === 0) {
            data.data_list.forEach((item) => {
              item = changeSalaryStyle(item)
            })
            _this.newPositionList = data.data_list
          }
        })
      },
      toPositionDetail (id) {
        this.$router.push({path: '/positioninfo/' + id})
      },
      formatterDate (row) {
        return formatterTime('MM月dd日', row.release_date)
      },
      formatterendEdu (row) {
        return getStaticMapList('education', row.academic_requirements)
      },
      forworkExperience (row) {
        return getStaticMapList('work_experience', row.work_experience)
      }
    },
    components: {
      UserEntryDialog
    }
  }
</script>
<style scoped>
  #homePageSys {
    margin-top: 2.5em;
  }

  /*求职名片*/
  .card-box {
    padding: 0.5em 0.5em 3.5em;
    margin-left: 1em;
    border: 2px solid #e8e8e8;
  }

  .personalcard {
    padding: 0.5em 0.2em;
    border: 1px solid #F2F2F2;
    background-color: #FAFAFA;
    margin-bottom: 0.5em;
    cursor: pointer;
  }

  .personalcard:hover {
    border: 1px solid #20A0FF;
  }

  .personalphoto {
    border: 2px solid white;
    padding: 0.6em;
  }

  .personalinfor {
    padding: 0.3em 0.5em;
    font-size: 0.9em;
    color: #475669;
  }

  /*搜索框*/
  .homeinfor {
    margin-right: 1em;
    margin-left: 2em;
  }

  .title {
    color: #475669;
    font-size: 0.7em;
    font-family: 微软雅黑;
  }

  .checkinfor {
    padding: 0.1em 0.8em;
    font-family: 微软雅黑;
    color: #20A0FF;
    font-size: 0.9em;
  }

  .homeinfor span:hover {
    color: red;
    cursor: pointer;
  }

  /*图标链接样式*/
  .interview-item {
    float: left;
    width: 25%;
    text-align: center;
  }

  .interview-item a {
    text-decoration: none;
  }

  .interview-infor {
    padding: 0.3em 0em;
    width: 80%;
    margin: 0em auto;
    background-color: #EEF1F6;
    color: #20A0FF;
    cursor: pointer;
  }

  .view-title {
    margin: 3px auto;
    background-color: #EEF1F6;
    font-size: 1.1em;
    color: #475669;
  }

  /*图片动画效果*/
  .turnphotos {
    border: none;
  }

  .showcompany {
    margin-top: 1.5em;
    display: inline;
  }

  .photos {
    text-align: center;
    width: 20%;
    float: left;
  }

  .photo-item img {
    width: 90%;
    margin: 0em auto;
  }

  .context {
    display: none;
    background: #666;
  }

  /*职位卡片样式*/
  .position-card {
    width: 100%;
    margin-top: 1em;
    border: 1px solid #F2F2F2;
    padding: 10px 0px 0px;
  }

  .card-content {
    height: 75px;
  }

  .content-left {
    width: 40%;
    float: left;
    margin-left: 1em;
  }

  .content-right {
    width: 40%;
    float: right;
  }

  .content-right h4,
  .content-left h4 {
    color: #20A0FF;
    margin: 10px auto;
    cursor: pointer;
  }

  .content-left h4 span {
    font-size: 16px;
    color: #999999;
    margin-left: 1em;
    font-weight: 300;
  }

  .content-right p,
  .content-left p {
    font-size: 16px;
  }

  .content-left p span {
    color: red;
    margin-right: 1em;
  }

  .card-footer {
    color: #666666;
    height: 1.6em;
    padding: 10px 1em 0px;
    background-color: #FAFAFA;
  }
</style>

